<template>
	<view class="record" @click="getClick">
		<view style="display: flex;flex-direction: row;height: 50rpx;">
			<view class="company">{{company}}</view>
			<view class="building">{{building}}</view>
			<view class="time">{{time}}</view>
		</view>
		<view style="display: flex;flex-direction: row;height: 50rpx;">
			<view class="goods">{{goods}}</view>
			<view class="state-bar">
				<view class="state-msg">{{state}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 用于显示 物品放行申请记录单条记录 及 相似格式单条记录
	 * company表示单条记录左上方公司名称
	 * building表示单条记录中上方楼盘名称
	 * time表示单条记录右上方时间
	 * goods表示单条记录左下方物品名称
	 * state表示单条记录右下方状态信息
	 * getClick方法用于监听该组件被点击事件
	 */
	export default{
		props: {
			company:{
				type:String
			},
			building:{
				type:String
			},
			time:{
				type:String
			},
			goods:{
				type:String
			},
			state:{
				type:String
			}
		},
		methods: {
			getClick() {
				this.$emit("getClick")
			}
		},
	}
</script>

<style>
	.record{
		background-color: #FFFFFF;
		height: 150rpx;
		border-bottom: solid 1rpx #C8C7CC;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.company{
		display: flex;
		align-items: center;
		width: 180rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		font-weight: 900;
	}
	.building{
		display: flex;
		align-items: center;
		width: 300rpx;
		font-size: 30rpx;
		font-weight: 900;
		padding: 0 20rpx 0 20rpx;
	}
	.time{
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 20rpx;
		color: #808080;
	}
	.goods{
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 30rpx;
		color: #808080;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 160rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 20rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
	}
	.state-msg{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>
